<!-- Dom模板 -->
<template>
  <div class="footer_box">
    <!-- Dom内容 -->
    <ul  class="navBox">
       <router-link :to="item.path" tag="li" v-for="(item,i) in navDataList" 
       :key="i" :class="$route.path===item.path ? 'active' : '' ">
           <p><i :class="item.meta.icon"></i></p>
           {{item.meta.title}}
       </router-link>
    </ul>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: '',
  data() {
    return {
      msg: '测试',
      navDataList:[],
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
      this.filterRouter()
  },
  // Vue方法定义
  methods: {
     filterRouter(){
      console.log(this.$router.options.routes);

         this.navDataList=this.$router.options.routes.filter(item=>{
             return item.hidden !==true
         })
     } 
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */
.active{
    color: blue;
}
.footer_box{
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    background: white;

}
.footer_box .navBox {
    width: 100%;
    height: 50px;
    border-top: 1px solid #ccc;
}
.footer_box .navBox>li {
    float: left;
    width: calc(100% / 4);
    text-align: center;
}
.navBox i{
    font-size: 20px;
}
</style>